<!DOCTYPE html>
<html style="height: 100%; width: 100%; margin: 0; padding: 0">

<head>
    <title>CloudTest</title>
    <!-- <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.3.min.css" /> -->
    <link rel="stylesheet" type="text/css" href="./w2ui-1.4.3.min.css" />
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.3.min.js"></script> -->
    <script type="text/javascript" src="./w2ui-1.4.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
</head>

<body style="height: 100%; width: 100%; margin: 0; padding: 0">
    <!-- <div id="logic_menu2" style="height: 10%; width: 100%; margin: 0; padding: 0"></div> -->
    <div id="layout" style="height: 100%; width: 100%; margin: 0; padding: 0"></div>
</body>
<script>
var user = 'chuqq';
var cases = []; // 当前用户所有的testcase
var curCaseId;
var curLogicId;
var args;


function onClickTestCase(event) {
    console.log('testcase: ' + event.target);
    curCaseId = event.target;
    var node = w2ui.sidebar_testcase.get(curCaseId);
    if (node.img == "icon-folder") return;

    $.getJSON( /*'/user/'+user+*/ '/cases/' + curCaseId + '/logics', function(logics) {
        logics = logics[0].logics;
        console.log('get logics:', logics);
        // 清理
        var nd = [];
        for (var i in w2ui['sidebar_logic'].nodes) nd.push(w2ui['sidebar_logic'].nodes[i].id);
        w2ui['sidebar_logic'].remove.apply(w2ui['sidebar_logic'], nd);
        w2ui['sidebar_logic'].add(logics);
        // onClickLogic({'target': 'undefined'});
        w2ui['layout'].content('right', '');
    });
}

function onClickLogic(event) {
    console.log('logic: ' + event.target)
    curLogicId = event.target;
    $.getJSON('/logics/' + curLogicId + '/args', function(nodes) {
        args = nodes[0];
        console.log('args:', JSON.stringify(args));
        w2ui['layout'].load('right', '/' + args.defineLogicId + '.html');
    });
}

// 用例树添加
function onTestcaseAdd() {
    console.log('bonTestcaseAdd');
    var selected = w2ui.sidebar_testcase.selected;
    if (selected != null && w2ui.sidebar_testcase.get(selected).img != "icon-folder") {
        return;
    }
    w2popup.open({
        title: 'Add',
        body: '<div>' +
            'Type: <select id="testcase_add_type">' +
            '             <option>folder</option>' +
            '             <option>case</option>' +
            '           </select><br>' +
            'Name: <input id="testcase_add_name"><br>' +
            '</div>',
        buttons: '<button onclick="onTestcaseAdd2()">Ok</button>' +
            '<button class="w2ui-btn" onclick="w2popup.close()">Cancel</button>'
    });
}

function onTestcaseAdd2() {
    var type = $('#testcase_add_type').val();
    var name = $('#testcase_add_name').val();
    console.log('onTestcaseAdd2: ' + type + ', ' + name);

    // TODO 判断selected是否folder

    var selected = w2ui.sidebar_testcase.selected;
    // 获取一个newid
    var newid;
    for (var i = 0; i < 9999; i++) {
        newid = 'case-' + i;
        if (w2ui.sidebar_testcase.get(newid) == null) break;
    }
    if (selected == null) {
        w2ui.sidebar_testcase.add([{
            id: newid,
            text: name,
            icon: (type == 'case') ? 'icon-page' : 'icon-folder'
        }]);
    } else {
        w2ui.sidebar_testcase.expand(selected);
        w2ui.sidebar_testcase.add(selected, [{
            id: newid,
            text: name,
            img: (type == 'case') ? 'icon-page' : 'icon-folder'
        }]);
    }
    w2ui.sidebar_testcase.select(newid);

    // 保存到服务端
    cases = w2ui.sidebar_testcase.nodes;
    $.post('/cases', cases, function() {});
    w2popup.close();
}

// 用例树删除
function onTestcaseDelete() {
    var selected = w2ui.sidebar_testcase.selected;
    console.log('onTestcaseDelete: ' + selected);
    if (selected == null) return;
    // TODO
    w2popup.open({
        title: 'Delete',
        body: 'Are you sure to delete ' + selected,
        buttons: '<button onclick="onTestcaseDelete2()">Ok</button>' +
            '<button class="w2ui-btn" onclick="w2popup.close()">Cancel</button>'
    });
}

function onTestcaseDelete2() {
    w2ui.sidebar_testcase.remove(w2ui.sidebar_testcase.selected);
    w2popup.close();
}

function onLogicAdd() {

}

function onLogicDelete() {

}

$(function() {
    console.log('start');
    var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';

    // layout
    $('#layout').w2layout({
        name: 'layout',
        panels: [
            // { type: 'top',  size: 50, resizable: true, style: pstyle, content: 'top' },
            {
                type: 'left',
                size: '15%',
                resizable: true,
                style: pstyle,
                content: 'left'
            }, {
                type: 'main',
                style: pstyle,
                content: 'main'
            },
            // { type: 'preview', size: '50%', resizable: true, style: pstyle, content: 'preview' },
            {
                type: 'right',
                size: '65%',
                resizable: true,
                style: pstyle,
                content: 'right'
            }, {
                type: 'bottom',
                size: '20%',
                resizable: true,
                style: pstyle,
                content: 'bottom'
            }
        ]
    });

    // left
    w2ui['layout'].content('left', $().w2layout({
        name: 'layout_testcase',
        panels: [{
            type: 'top',
            size: 30,
            resizable: false,
            // style: pstyle,
            content: 'top'
        }, {
            type: 'main',
            // style: pstyle,
            content: 'main'
        }]
    }));

    w2ui['layout_testcase'].content('top', $().w2toolbar({
        name: 'testcase_toolbar',
        items: [{
                type: 'button',
                id: 'testcase_add_folder',
                caption: '',
                onClick: onTestcaseAdd,
                img: 'w2ui-icon-plus'
                    // img: 'icon-add'
            }
            /*, {
                        type: 'button',
                        id: 'testcase_add_case',
                        caption: 'case',
                        onClick: function() {
                            console.log('button clicked: testcase_add_case');
                        },
                        img: 'w2ui-icon-plus'
                    }*/
            , {
                type: 'button',
                id: 'testcase_delete',
                caption: '',
                onClick: onTestcaseDelete,
                img: 'w2ui-icon-cross'
            }
        ]
    }));

    w2ui['layout_testcase'].content('main', $().w2sidebar({
        name: 'sidebar_testcase',
        nodes: [],
        // menu: [{
        //     id: 1,
        //     text: '增加',
        //     img: 'icon-page'
        // }, {
        //     id: 2,
        //     text: '删除',
        //     img: 'icon-page'
        // }],
        onClick: onClickTestCase,
    }));

    // logic
    w2ui['layout'].content('main', $().w2layout({
        name: 'layout_logic',
        panels: [{
            type: 'top',
            size: 30,
            resizable: false,
            // style: pstyle,
            content: 'top'
        }, {
            type: 'main',
            // style: pstyle,
            content: 'main'
        }]
    }));

    w2ui['layout_logic'].content('main', $().w2sidebar({
        name: 'sidebar_logic',
        // topHTML: '<div id="logic_menu"></div>',
        nodes: [],
        onClick: onClickLogic,
    }));

    // logic_menu
    w2ui['layout_logic'].content('top', $().w2toolbar({
        name: 'logic_toolbar',
        items: [{
                type: 'button',
                id: 'testcase_add_folder',
                caption: '',
                onClick: onLogicAdd, // TODO
                img: 'w2ui-icon-plus'
            }
            /*, {
                        type: 'button',
                        id: 'testcase_add_case',
                        caption: 'case',
                        onClick: function() {
                            console.log('button clicked: testcase_add_case');
                        },
                        img: 'w2ui-icon-plus'
                    }*/
            , {
                type: 'button',
                id: 'testcase_delete',
                caption: '',
                onClick: onLogicDelete, // TODO
                img: 'w2ui-icon-cross'
            }
        ]
    }));

    console.log('logic_menu:', $('#logic_menu'));
    // setTimeout(function() {
    //     console.log('logic_menu:', $('#logic_menu'));
    //     $('#logic_menu').w2toolbar({
    //         name: 'logic_toolbar',
    //         items: [{
    //             type: 'button',
    //             id: 'logic_add',
    //             caption: '增加',
    //             img: 'icon-page'
    //         }]
    //     });
    // }, 1000);
    // 直接获取用户所有的用例结构
    $.getJSON('/user/' + user + '/cases', function(nodes) {
        // 清理
        // var nd = [];
        // for (var i in w2ui['sidebar_testcase'].nodes) nd.push(w2ui['sidebar_testcase'].nodes[i].id);
        // w2ui['sidebar_testcase'].remove.apply(w2ui['sidebar_testcase'], nd);
        cases = nodes;
        w2ui['sidebar_testcase'].add(cases);
    });
});
</script>

</html>
